<template>
  <div class="page">
    <el-drawer
      :title="temp.userName"
      :visible.sync="visible"
      :append-to-body="true"
      size="70%"
    >
      <div class="base-box">
        <div class="text-info">
          <el-descriptions title="基本信息" :column="2" label-class-name="my-label" content-class-name="my-content">
            <el-descriptions-item label="姓名">{{ temp.userName }} ({{ temp.usex === 1 ? '男' : temp.usex === 2 ? '女' : temp.usex === 0 ? '未知' : '' }})</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ temp.age }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ temp.uphone }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{ temp.userCard }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{ temp.uTypeNames }}</el-descriptions-item>
            <el-descriptions-item label="社保状态">{{ temp.socialCardStatus ? '已参保' : '未参保' }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1" label-class-name="my-label" content-class-name="my-content">
            <el-descriptions-item label="居住地址">{{ temp.uaddress }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="2" class="title" label-class-name="my-label" content-class-name="my-content">
            <el-descriptions-item label="所属企业">{{ temp.corpName }}</el-descriptions-item>
            <el-descriptions-item label="所属站点">{{ temp.orgName }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="img-info">
          <img v-if="temp.txUrl" :src="imgBaseUrl + temp.txUrl">
          <div v-else class="img">
            <span>无员工照</span>
          </div>
        </div>
      </div>
      <div class="title mt">证件信息</div>
      <div v-for="(item, index) in tableData.data" :key="index" class="paper-info">
        <div class="image-box">
          <el-image
            class="image"
            :src="item.fullUrl"
            :preview-src-list="[item.fullUrl]"
          >
            <div slot="error" class="image-slot">
              <span>无证件照</span>
            </div>
          </el-image>
        </div>
        <div class="image-info">
          <div v-if="item.cardStatusStr" :class="item.cardStatusStr === '正常' ? 'circle green' : 'circle red'">{{ item.cardStatusStr }}</div>
          <div class="info-box">
            <div class="row-item">
              <div class="label">证件类型:</div>
              <div>{{ item.keyName }}</div>
            </div>
            <div class="row-item">
              <div class="label">证件编号:</div>
              <div>{{ item.codeNum }}</div>
            </div>
            <div class="row-item">
              <div class="label">证件有效期:</div>
              <div>{{ item.endTime ? parseTime(item.endTime) : '' }}</div>
            </div>
            <div class="row-item">
              <div class="label">证件状态:</div>
              <div>{{ item.cardStatusStr }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { getUserInfo, queryMap } from '@/api'
  import { parseTime } from '@/utils'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { imgBaseUrl } from '@/utils/config'
  export default {
    data() {
      return {
        imgBaseUrl,
        parseTime,
        visible: false,
        temp: {},
        currentUrl: [],
        corpTypeMap: [],
        certificateTypeMap: [],
        tableData: {
          data: [],
          column: [
            {
              type: 'index',
              align: 'center'
            },
            {
              prop: 'cardTypeName',
              label: '证件类型'
            },
            {
              prop: 'typeName',
              label: '证件名称'
            },
            {
              prop: 'cardNum',
              label: '证件编号'
            },
            {
              prop: 'cardUrl',
              label: '证件照片',
              render: (h, { row, $index }) => {
                return row.cardUrl && <el-link type='primary' size='mini' onClick={() => this.viewImg(row)}>查看</el-link>
              }
            },
            {
              prop: 'endTime',
              label: '证件有效期',
              render: (h, { row }) => <span>{ row.endTime ? parseTime(row.endTime, '{y}-{m}-{d}') : '' }</span>
            }
          ]
        }
      }
    },
    methods: {
      open(temp) {
        return new Promise(async resolve => {
          this.resolve = resolve
          this.temp = temp
          await this.getInfo()
          this.visible = true
        })
      },
      close() {
        this.visible = false
      },
      async getInfo() {
        const res = await getUserInfo({
          userId: this.temp.userId
        })
        this.tableData.data = res.data.userCardFileList
        if (this.tableData.data.length > 0) {
          this.tableData.data.forEach((item) => {
            if (item.endTime) {
              if (new Date(item.endTime).getTime <= new Date().getTime()) {
                item.cardStatusStr = '正常'
              } else {
                item.cardStatusStr = '异常'
              }
            }
          })
        }
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'CorporationCertificateType' })
        ])
        this.certificateTypeMap = res.data
      },
      viewImg(row) {
        if (row.fullUrl) {
          this.currentUrl = [row.fullUrl]
          this.$nextTick(() => {
            this.$refs.imageRef.clickHandler()
          })
        } else {
          this.$message('该证件类型无照片')
        }
      }
    }
  }
</script>

<style lang='scss' scoped>
.el-drawer__wrapper /deep/ .el-drawer__body {
  padding: 0 30px;
  font-size: 14px;
  .title {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: 700;
    color: #38BDBD;
  }
  .color {
    color: #38BDBD;
  }
}
/deep/.el-descriptions__title {
  color: #38BDBD;
}
/deep/.el-image__error {
  display: none;
}
/deep/.my-label {
  font-size: 14px !important;
}
/deep/.my-content {
  font-size: 14px !important;
}
.base-box {
  display: flex;
  width: 100%;
  .text-info {
    width: 75%;
  }
  .img-info {
    width: 25%;
    img {
      width: 150px;
      height: 180px;
    }
    .img {
      width: 150px;
      height: 180px;
      font-weight: 600;
      line-height: 180px;
      text-align: center;
      background-image: url("~@/assets/no-img.png");
      background-size: 100% 100%;
    }
  }
}
.paper-info {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  .image-box {
    width: 45%;
    height: 250px;
    .image {
      width: 100%;
      height: 100%;
    }
  }
  .image-info {
    width: 55%;
    height: 250px;
    padding: 20px;
    .row-item {
      display: flex;
      width: 100%;
      margin-bottom: 20px;
      .label {
        width: 80px;
      }
    }
  }
}
/deep/.image-slot {
  width: 100%;
  height: 250px;
  font-weight: 600;
  line-height: 250px;
  text-align: center;
  background-color: #F5F7FA;
  background-image: url("~@/assets/no-img.png");
  background-size: 100% 100%;
}
.info-box {
  margin-top: -50px;
}
.circle {
  position: relative;
  left: 75%;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  padding: 10px;
  margin-top: -50px;
  font-size: 16px;
  font-weight: 600;
  color: #E76E7E;
  text-align: center;
  border-radius: 50%;
  transform: rotateZ(-25deg);
}
.red {
  color: #E76E7E;
  border: 8px solid #E76E7E;
}
.green {
  color: #1ABC9C;
  border: 8px solid #1ABC9C;
}
.mt {
  margin-top: 20px;
}
.link {
  color: #38BDBD;
  cursor: pointer;
}
</style>
